<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      // 防抖策略 debounce
      // 事件触发了，延迟n秒后再执行回调，在n秒内如果该事件又触发了，则需要重新计时
      // 好处：对于频繁触发的事件，不会频繁的执行回调，只会执行最后一次
      // 最常见场景：输入框的输入内容(input事件频繁触发)
      let timerId
      document.querySelector('input').oninput = function () {
        // 防抖，在下一个延时器开启前，关闭上一个延时器
        clearTimeout(timerId)
        // 开启延时器
        timerId = setTimeout(() => {
          console.log(this.value)
        }, 300)
      }

      // 节流策略
      let flag = true
      document.querySelector('input').oninput = function () {
        if (flag) {
          console.log(this.value)
        }
        flag = false
        setTimeout(() => {
          flag = true
        }, 1000)
      }
    </script>
  </body>
</html>
